<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" width="375" height="180">
    <van-swipe-item v-for="image in images" :key="image.id">
      <img v-lazy="image.imageUrl" :style="{width: '100%', height: '100%'}" />
    </van-swipe-item>
  </van-swipe>
  <!-- 列表商品 -->
  <van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
  </div>
</template>

<script>
import { findBaoKuan } from '@/api/home'

export default {
  name: 'Home',
  data () {
    return {
      images: [],
      list: [], // 商品数据数组
      loading: false, // 列表中是否在加载当前页面数据
      finished: false, // 列表中是否数据加载完毕
      nextIndex: 0
    }
  },
  created () {
    // 轮播图
    this.$http.get('/api/tab/1?start=0', {
      headers: {
        'x-platform': 'pc'
      }
    })
      .then(data => {
        // console.log('轮播图', data)
        this.images = data.banners
      })
      .catch()
  },
  // methods: {
  //   findProducts (star = 0) {
  //     // eslint-disable-next-line no-undef
  //     return findBaoKuan(star)
  //       .then(data => {
  //         console.log(this.list)
  //         this.list = [
  //           ...this.list,
  //           ...data.list
  //         ]
  //         this.nextIndex = data.nextIndex
  //         this.finished = data.isEnd
  //       })
  //       .catch(err => {
  //         console.log('异常', err)
  //       })
  //   },
  //   onload () {
  //     console.log('jiazai...')
  //     console.log(this.nextIndex)
  //     this.findProducts(this.nextIndex).then(() => {
  //       this.loading = false
  //     })
  //   },
  //   jumpToDetail (id) {
  //     this.$router.push('/detail?id=' + id)
  //   }
  // }
  methods: {
    findProducts (star = 0) {
      return findBaoKuan(star)
        .then(data => {
          this.list = [
            ...this.list,
            ...data.list
          ]
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
        })
        .catch(err => {
          console.log('异常', err)
        })
    },
    onLoad () {
      console.log('数据加载中....')
      console.log(this.nextIndex)
      this.findProducts(this.nextIndex).then(() => {
        this.loading = false
      })
    },
    jumpToDetail (id) {
      this.$router.push('/detail?id=' + id)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
